<template>
  <div class="inout-charts">
    <el-row class="header">
      <el-col :span="6"><p class="subject">入库/出库信息</p></el-col>
      <el-col :span="18" class="bar"
        ><el-radio-group
          v-model="dateTypeChangeValue"
          size="medium"
          class="switch"
          @change="handleDateTypeChange"
        >
          <el-radio-button label="本周" />
          <el-radio-button label="本月" />
          <el-radio-button label="全年" />
        </el-radio-group>
      </el-col>
    </el-row>

    <!-- 图表 -->
    <chart :chartData="chartData" />
  </div>
</template>

<script lang="ts">
import { getStorageInOutUseInformation } from '@/module-base/api/dashboard'
import { Component, Vue } from 'vue-property-decorator'
import Chart, { IChartData } from './charts/index.vue'

@Component({
  name: 'InoutCharts',
  components: {
    Chart
  }
})
export default class extends Vue {
  private dateTypeChangeValue = '本周'

  private chartData = {} as IChartData

  created() {
    this.initData()
  }

  private handleDateTypeChange(value:string) {
    this.dateTypeChangeValue = value
    this.initData()
  }

  private async initData() {
    let dimension = 'w'
    switch (this.dateTypeChangeValue) {
      case '本周':
        dimension = 'w'
        break
      case '本月':
        dimension = 'e'
        break
      case '全年':
        dimension = 'c'
        break
    }

    const { data } = await getStorageInOutUseInformation({
      dimension: dimension
    })
    const xAxis = data.x
    // 入库
    let yAxisData1 = [] as number[]
    // 出库
    let yAxisData2 = [] as number[]
    data.data.forEach((item: any) => {
      if (item.name.indexOf('入') > -1) {
        yAxisData1 = item.data
      }
      if (item.name.indexOf('出') > -1) {
        yAxisData2 = item.data
      }
    })
    this.chartData = {
      xAxis, yAxisData1, yAxisData2
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'index';
</style>
